import { HTMLAttributes } from 'react'

type SvgWithColor = {
  className?: string
} & HTMLAttributes<SVGElement>

export const Delete = ({ className, ...props }: SvgWithColor) => {
  return (
    <svg
      className={className}
      fill={'none'}
      height={'16'}
      viewBox={'0 0 16 16'}
      width={'16'}
      xmlns={'http://www.w3.org/2000/svg'}
      {...props}
    >
      <path
        className={className}
        d={
          'M14 4.00108H10.6667V2.88775C10.651 2.46096 10.4668 2.05779 10.1544 1.76661C9.84195 1.47543 9.42683 1.32001 9 1.33442H7C6.57316 1.32001 6.15804 1.47543 5.84561 1.76661C5.53319 2.05779 5.34897 2.46096 5.33333 2.88775V4.00108H1.99999C1.82318 4.00108 1.65361 4.07132 1.52859 4.19634C1.40357 4.32137 1.33333 4.49094 1.33333 4.66775C1.33333 4.84456 1.40357 5.01413 1.52859 5.13915C1.65361 5.26418 1.82318 5.33441 1.99999 5.33441H2.66666V12.6677C2.66666 13.1982 2.87738 13.7069 3.25245 14.082C3.62752 14.457 4.13623 14.6677 4.66666 14.6677H11.3333C11.8638 14.6677 12.3725 14.457 12.7475 14.082C13.1226 13.7069 13.3333 13.1982 13.3333 12.6677V5.33441H14C14.1768 5.33441 14.3464 5.26418 14.4714 5.13915C14.5964 5.01413 14.6667 4.84456 14.6667 4.66775C14.6667 4.49094 14.5964 4.32137 14.4714 4.19634C14.3464 4.07132 14.1768 4.00108 14 4.00108ZM6.66666 2.88775C6.66666 2.78108 6.80666 2.66775 7 2.66775H9C9.19333 2.66775 9.33333 2.78108 9.33333 2.88775V4.00108H6.66666V2.88775ZM12 12.6677C12 12.8446 11.9298 13.0141 11.8047 13.1392C11.6797 13.2642 11.5101 13.3344 11.3333 13.3344H4.66666C4.48985 13.3344 4.32028 13.2642 4.19526 13.1392C4.07023 13.0141 3.99999 12.8446 3.99999 12.6677V5.33441H12V12.6677Z'
        }
        fill={'white'}
      />
    </svg>
  )
}
